<template>
	<view class="content paddingtb">
		<!-- 店鋪列表 -->
		<view class="flexcenter" v-if="!list.data.length">
			<view class="placeholderimage" style="margin-top: 100rpx;" ></view>
		</view>
		<view class="mainpadding ffffff margin_bottom3 border12 positionr" v-for="(item,index) in list.data"
			:key="item.id" @click="goShopInfo(item.id,item)">
			<view class="flex">
				<image class="shopImg margin_right2" :src="item.logoimage" mode=""></image>
				<view class="flex1">
					<view class="flexbetween">
						<view class="color_ling text_g">{{item.name}}</view>
						<view class="flexleft" @click.stop="collectshop(item.id)">
							<!-- <view class="faRadius margin_right1"></view>
							<view class="faRadius margin_right1"></view>
							<view class="faRadius"></view> -->
							<u-icon class="margin_right2" name="star-fill" color="#ffa126" size="24"></u-icon>
						</view>
					</view>
					<view class="flexleft margin_top">
						<view class="flexleft margin_right3">
							<image class="shopItemImg" src="/static/images/index/score.png" mode=""></image>
							<view class="text_pee color_theme">{{item.score}}分</view>
						</view>
						<view class="flexleft margin_right3">
							<image class="shopItemImg" src="/static/images/index/sales.png" mode=""></image>
							<view class="text_pee color_six">月售{{item.sale}}</view>
						</view>
						<view class="flexleft">
							<image class="shopItemImg" src="/static/images/index/distance.png" mode=""></image>
							<view class="text_pee color_six">56.5km</view>
						</view>
					</view>
				</view>
			</view>
			<view class="scrollBox margin_top">
				<scroll-view class="white_nowrap" scroll-x>
					<view class="flexleft">
						<!-- 不可超過多展示8個 -->
						<view class="margin_right1" v-for="value in item.goods" :key="value.id">
							<image class="goodsImg" :src="value.logoimage" v-if="value.logoimage" mode=""></image>
							<image class="goodsImg" src="@/static/images/index/noImg.jpg" mode="" v-else>
								<view class="color_ling text_pee margin_top1 lianghang"
									style="width: 164rpx;white-space: pre-wrap;">
									{{value.name}}
								</view>
								<view class="color_ling text_e margin_top1">
									<text style="font-size: 12rpx;">$</text>
									{{value.price}}
								</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- <view class="black_bg" v-if="index==1"></view>
			<view class="cancelCollect" v-if="index==1">
				<image class="cancelCollectImg" src="/static/images/mine/cancelCollect.png" mode=""></image>
				<view class="color_ling text_b margin_top1">取消收藏</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: {
					data: []
				}
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init() { //獲取提交外送員認證信息
				let _this = this
				this.http.request('/api/shop/collectlist', 'GET', {}).then(res => {
					res.data.forEach(item => {
						if(item.is_goole !=1){
							item.logoimage = this.imgUrl + item.logoimage
							item.goods.forEach(value => {
								if (value.logoimage) {
									value.logoimage = this.imgUrl + value.logoimage
								}
							})
						}
						
					})
					this.list.data = res.data
				})
			},
			collectshop(shop_id) { //收藏店鋪
				this.http.request('/api/shop/addcollect', 'POST', {
					shop_id
				}).then(res => {
					if (res.code == 1) {
						this.http.toast("操作成功")
						this.init()
					} else {
						this.http.toast(res.msg)
					}
				})
			},
			goShopInfo(id, item) { //店鋪詳情
				if (item.is_goole == 1) {
					uni.navigateTo({
						url: "/pages_index/shopInfogoogle?id=" + id
					})
					return false
				}
				uni.setStorageSync("shop_id", id)
				uni.navigateTo({
					url: "/pages_index/shopInfo?id=" + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 店鋪
	.shopImg {
		width: 94rpx;
		height: 94rpx;
		min-width: 94rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.faRadius {
		width: 7rpx;
		height: 7rpx;
		background-color: #000000;
		border-radius: 50%;
	}

	.shopItemImg {
		width: 24rpx;
		height: 24rpx;
		margin-right: 5rpx;
	}

	.scrollBox {
		padding-left: 100rpx;

		.goodsImg {
			width: 164rpx;
			height: 122rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
		}
	}

	// 遮罩层
	.black_bg {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 90;
	}

	// 取消收藏
	.cancelCollect {
		width: 132rpx;
		height: 132rpx;
		background: #FFFFFF;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 99;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.cancelCollectImg {
			width: 40rpx;
			height: 38rpx;
		}
	}
</style>